.main {
  background: var(--background);
  flex: 1 1;
  padding-bottom: var(--space-24x);
  position: relative;
  z-index: 0;
}
.main::before {
  --offset-top: 356px;

  background: var(--accents-1);
  border-top: 1px solid var(--accents-2);
  content: '';
  height: calc(100% - var(--offset-top));
  left: 0;
  position: absolute;
  top: var(--offset-top);
  width: 100%;
  z-index: -1;
}
.wrapper {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  width: var(--page-width-with-margin);
  padding-left: var(--page-margin);
  padding-right: var(--page-margin); 
}
.wiss{
  --flex: initial;
  --sm-direction: column;
  --md-direction: column;
  --lg-direction: row;
  --align: stretch;
  --justify: flex-start;
  --direction: var(--lg-direction);

  display: flex;
  flex-direction: var(--direction, column);
  align-items: var(--align, stretch);
  justify-content: var(--justify, flex-start);
  flex: var(--flex, initial);
}
.stack{
  display: flex;
  flex-direction: column;
}
.container{
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 1px;
  max-width: 100%;
  flex: var(--flex);
  justify-content: var(--justify-content);
  align-items: var(--align-items);
}
.spacer{
  --space:70px;

  display: block;
  width: 1px;
  height: 1px;
  min-width: 1px;
  min-height: 1px;
  margin-left: calc(24px - 1px);
  margin-top: calc(24px - 1px);
  user-select: none;
}
.has-border-bottom{
  border-bottom: 1px solid var(--accents-2);
}
.has-border-top{
  border-top: 1px solid var(--accents-2);
}
@media screen and (max-width: 900px) {
  .wiss{
    --direction:var(--md-direction)
  }
}

@media screen and (max-width: 600px) {
  .spacer {
    --space: 35px;
  }
   .wiss{
    --direction:var(--sm-direction)
  }
}